<template>
  <div class="personal-info-page">
    <div class="page-title">个人信息</div>
    <form @submit.prevent="handleSubmit" >
      <div class="avatar-container">
        <img :src="avatarUrl" alt="用户头像" class="avatar" />
        <label for="avatar-upload" class="change-avatar-btn">修改头像</label>
        <input type="file" id="avatar-upload" class="avatar-upload-input" @change="handleAvatarUpload" />
      </div>
      <div class="form-item">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="name" placeholder="请输入姓名" />
      </div>
      <div class="form-item">
        <label>性别:</label>
        <div class="gender-options">
          <input type="radio" id="male" name="gender" value="男" v-model="gender" />
          <label for="male">男</label>
          <input type="radio" id="female" name="gender" value="女" v-model="gender" />
          <label for="female">女</label>
        </div>
      </div>
      
      <div class="form-item">
        <label for="phone">手机:</label>
        <input type="tel" id="phone" v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="form-item">
        <label for="introduction">标签:</label>
        <input type="text" id="introduction" v-model="introduction" placeholder="编辑介绍，展示我的独特态度" />
      </div>
      <div class="form-item">
        <label for="address">收货地址:</label>
        <input type="text" id="address" v-model="address" placeholder="请输入收货地址" />
      </div>
      
      <button type="submit" @click="handleSubmit1" class="submit-btn">保存修改</button>
    </form>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const avatarUrl = ref('https://example.com/avatar.png'); // 替换为实际头像地址
const name = ref('');
const gender = ref('');
const address = ref('');
const introduction = ref('');
const phone = ref('');

const handleAvatarUpload = (e) => {
  const file = e.target.files[0];
  if (file) {
    // 实际项目中，这里可以调用接口上传头像文件
    // 并将返回的头像地址赋值给 avatarUrl
    console.log('上传的头像文件：', file);
    // 这里只是模拟，实际需根据上传结果修改 avatarUrl
    avatarUrl.value = URL.createObjectURL(file);
  }
};
import { useLoginStore } from "@/stores/LoginStore";
const loginStore = useLoginStore();
import axios from '@/http/axios';
import { ElNotification } from 'element-plus';

const handleSubmit = () => {
  if (!name.value) {
    alert('请填写姓名');
    return;
  }
};
 async function handleSubmit1(){
    let res = await axios.get(
      `/userInfo/${name.value}/${gender.value}/${phone.value}/${address.value}/${introduction.value}`,
      {
        headers: {
          'Authorization': loginStore.loginToken
        }
      })
    if (res.data.code == 200) {
          ElNotification({
              title: 'Success',
              message: res.data.data,
              type: 'success',
          })
          name.value= ''
          gender.value = ''
          phone.value = ''
          address.value = ''
          introduction.value = ''
      } else {
          ElNotification({
              title: 'Error',
              message: res.data.msg,
              type: 'error',
              duration: 1000
          })
      }
  }
</script>
<style scoped>
.personal-info-page {
  width: 100%;
  margin: 0 auto;
}

.page-title {
   height: 30px;
  line-height: 30px;
  padding-left: 20px;
  background-color: #d3d3d3;
  margin-bottom: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.change-avatar-btn {
  cursor: pointer;
  color: #007bff;
}

.avatar-upload-input {
  display: none;
}

.form-item {
  width: 40%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.form-item label {
  width: 80px;
  margin-right: 10px;
}

.form-item input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.gender-options {
  display: flex;
  align-items: center;
}

.gender-options input {
  margin-right: 5px;
}

.gender-options label {
  width: auto;
  margin-right: 15px;
}

.submit-btn {
  display: block;
  width: 150px;
  margin: 30px auto 0;
  padding: 10px;
  background-color: #a05c38;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #8a4b2d;
}
</style>